<template>
	<view class="login">
		<uni-card :is-shadow="false" :border="false">
			<view class="login-title">
				开源
			</view>
			<uni-forms ref="loginForm" :modelValue="login" label-position="left">
				<uni-forms-item label="账号" required>
					<uni-easyinput v-model="login.username" placeholder="账号" />
				</uni-forms-item>
				<uni-forms-item label="密码" required>
					<uni-easyinput type="password" v-model="login.password" placeholder="密码" />
				</uni-forms-item>
				<uni-forms-item label="验证码" required>
					<uni-easyinput v-model="login.captcha" placeholder="验证码" />
				</uni-forms-item>
				<uni-forms-item label=" ">
					<image :src="captchaUrl" style="height: 40px;width: 150px;" @click="getCaptchaUrl"></image>
				</uni-forms-item>
			</uni-forms>
			<view>
				<button type="primary" @click="loginSubmit">登录</button>
			</view>
		</uni-card>
	</view>
</template>

<script>
import {getUuid} from '@/utils/index';
import {useLoginApi} from '@/api/login';

export default {
	data() {
		return {
			login:{
				username: 'admin',
				password: 'admin',
				captcha: '',
				uuid: ''
			},
			captchaUrl: ''
		}
	},
	onLoad() {
		if (this.$store.state.user.token){
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}else {
			this.getCaptchaUrl();
		}
	},
	methods: {
		getCaptchaUrl() {
			this.login.uuid = getUuid();
			this.captchaUrl = `${uni.$u.http.config.baseURL}/captcha?uuid=${this.login.uuid}`;
		},
		loginSubmit() {
			useLoginApi(this.login).then(res =>{
				this.$store.commit('user/setToken', res.data.token)
				
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}).catch(e =>{
				this.getCaptchaUrl();
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.login {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.login-title{
	margin: 50px 0;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: rgb(60, 156, 255);
}
</style>

